<script>
import {
  comSealSerch,
  sealAuth,
  authRecordList,
  getAuthCunt,
  updatePassword,
} from "@/http/api";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";

export default {
  components: {},
  name: "",
  data() {
    const checkOld = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入旧密码"));
      } else {
        callback();
      }
    };
    const checkSure = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入确认密码"));
      } else if (this.queryParams.new_password !== value) {
        callback(new Error("确认密码与新密码不一致，请重新输入"));
      } else {
        callback();
      }
    };
    const checkNew = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入新密码"));
      } else if (value.length < 6) {
        callback(new Error("新密码不能低于6位数"));
      } else {
        callback();
      }
    };
    return {
      queryParams: {
        old_password: "",
        new_password: "",
        confirm_password: "",
      },
      editPassword: false,
      rules: {
        old_password: [
          { validator: checkOld, required: true, trigger: "blur" },
        ],
        new_password: [
          { required: true, validator: checkNew, trigger: "blur" },
        ],
        confirm_password: [
          { required: true, validator: checkSure, trigger: "blur" },
        ],
      },
      channel_partner_name: localStorage.getItem("channel_partner_name"),
      showResult: false,
      showAuthRecord: false,
      sealTypeArr: [
        { label: "法定名称章", value: "01" },
        { label: "财务专用章", value: "02" },
        { label: "发票专用章", value: "03" },
        { label: "合同专用章", value: "04" },
        { label: "法定代表人名章", value: "05" },
        { label: "个人私章", value: "99" },
      ],
      authCount: {
        has_num: 0,
        use_num: 0,
      },
      waitSeal: [],
      authRecord: [],
      queryData: {
        page: 1,
        per_page: 10,
        seal_id: "",
        company_name: "",
        seal_type: "",
      },
      comQueryData: {
        company_name: "",
        code: "",
        mobile: "",
      },
      total: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    async sureEditFn() {
      const valid = await this.$refs.editPwdRef.validate();
      if (!valid) {
        return false;
      }
      const queryData = { ...this.queryParams };
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      delete queryData.confirm_password;
      updatePassword(queryData).then((res) => {
        setTimeout(() => {
          loading.close();
        }, 100);
        if (res.data.code === 1) {
          ElMessage({
            type: "success",
            message: "修改成功，即将跳转到登录页",
          });
          setTimeout(() => {
            this.$router.push({ path: "/login" });
          }, 1500);
        }
      });
    },
    showEditPwdFn() {
      this.editPassword = true;
    },
    checkSealFn(item) {
      item.active = !item.active;
    },
    authFn() {
      let isSealArr = this.waitSeal.filter((item) => {
        return item.active;
      });
      if (isSealArr.length == 0) {
        ElMessage("请勾选需要授权的印章");
        return false;
      }
      let queryData = isSealArr.map((item) => {
        return {
          seal_id: item.seal_id,
        };
      });
      ElMessageBox.confirm(
        `确定对勾选的${queryData.length}个印章进行授权操作？`,
        "授权提示",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "Warning",
        }
      )
        .then(async () => {
          const { data } = await sealAuth(queryData);
          ElMessage({ type: "success", message: "授权成功" });
          this.getAuthCuntFn();
          this.showResult = false;
          console.log(queryData);
        })
        .catch((err) => {});
    },
    async searchComFn() {
      const { data } = await comSealSerch(this.comQueryData);
      this.waitSeal = data.data.map((item) => {
        item["active"] = true;
        return item;
      });
      this.showResult = true;
    },
    authRecordFn() {
      this.showAuthRecord = true;
    },
    serchFn() {},
    async getAuthRecordFn() {
      const { data } = await authRecordList(this.queryData);
      this.authRecord = data.data.data;
      this.total = data.data.total;
    },
    async getAuthCuntFn() {
      const { data } = await getAuthCunt();
      this.authCount = data.data;
    },
    outFn() {
      ElMessageBox.confirm(`确定退出当前账号吗？`, "退出提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "Warning",
      })
        .then(async () => {
          localStorage.removeItem("channel_token");
          ElMessage({ type: "success", message: "账号已成功，即将跳转登录页" });
          setTimeout(() => {
            this.$router.push({ path: "/login" });
          }, 1500);
        })
        .catch((err) => {});
    },
  },
  mounted() {},
  created() {
    this.getAuthRecordFn();
    this.getAuthCuntFn();
  },
};
</script>
<template>
  <div class="container">
    <div class="authCont">
      <div class="logoImg">
        <img src="/img/logo.png" />
        <div class="logo_text">
          <div class="logo_zh">渠道网点授权</div>
          <div class="logo_en">Channel network authorization</div>
        </div>
      </div>
      <div class="authIno">
        <div class="userName_">{{ channel_partner_name }}</div>
        <div class="userName" @click="showEditPwdFn">
          <span class="dropIcon iconfont icon-xiugai"></span>
          <span class="dropText">修改密码</span>
        </div>
        <div class="userName" @click="outFn">
          <span class="dropIcon iconfont icon-tuichu1"></span>
          <span class="dropText">退出登录</span>
        </div>
      </div>
    </div>
    <div class="stepCont">
      <div class="stepForm">
        <div class="maimHeadCont">
          <div class="mainHead">授权企业查询</div>
          <div class="recordTip">
            当前账号已累计授权<span @click="authRecordFn">{{
              authCount.use_num
            }}</span
            >次,剩余可授权<span>{{ authCount.has_num }}</span
            >次。
          </div>
        </div>
        <div class="regFile">
          <div class="fileCont">
            <input
              v-model="comQueryData.company_name"
              placeholder="请输入需要查询的企业名称"
            />
          </div>
          <div class="fileCont">
            <input
              v-model="comQueryData.code"
              maxlength="18"
              placeholder="请输入企业统一信用代码"
            />
          </div>
          <div class="fileCont">
            <input
              maxlength="11"
              v-model="comQueryData.mobile"
              placeholder="请输入法定人手机号"
            />
          </div>
        </div>
        <div class="conic pullBtn" @click="searchComFn">
          一件查询企业授权结果
        </div>
      </div>
    </div>
    <div class="maskCenterCont" v-show="showResult">
      <div class="closeMask" @click="showResult = false"></div>
      <div class="maskMain">
        <div class="resultTitle">
          <img src="/img/result_line.png" />
          <div class="resultText">查询结果</div>
        </div>
        <div class="resultCont">
          <div class="resultTag errTag">
            <div class="iconfont icon-wuxiao1"></div>
            <div>印章无效</div>
          </div>
          <div class="waitSealList">
            <div
              class="waitSealItem"
              :key="index"
              v-for="(item, index) in waitSeal"
            >
              <div class="waitSealInfo">
                <div
                  @click="checkSealFn(item)"
                  :class="
                    item.active
                      ? 'checkBox checkBox_ iconfont icon-gouxuan'
                      : 'checkBox iconfont icon-gouxuan'
                  "
                ></div>
                <div class="resultCardDesItem">
                  <div class="desItemName">企业名称</div>
                  <div class="desItemText boldText">
                    {{ item.name.split("-")[0] }}
                  </div>
                </div>
                <div class="resultCardDesItem">
                  <div class="desItemName">印章名称</div>
                  <div class="desItemText">{{ item.name.split("-")[1] }}</div>
                </div>
                <div class="resultCardDesItem">
                  <div class="desItemName">印章状态</div>
                  <div class="desItemText">待授权</div>
                </div>
                <div class="resultCardDesItem">
                  <div class="desItemName">到期时间</div>
                  <div class="desItemText">{{ item.expire_time }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="authBtn" @click="authFn">一件授权已勾选的无效印章</div>
      </div>
    </div>
    <div class="maskCenterCont" v-if="showAuthRecord">
      <div class="closeMask" @click="showAuthRecord = false"></div>
      <div class="tableCont width_1050">
        <div class="tableSerch">
          <div class="serchLeft">授权记录（{{ authRecord.length }}）</div>
          <div class="serchRight">
            <el-select
              @clear="serchFn"
              style="width: 150px"
              @change="serchFn"
              v-model="queryData.seal_type"
              placeholder="请选择印章类型"
            >
              <el-option
                v-for="item in sealTypeArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              clearable
              style="margin-left: 15px; width: 150px"
              @clear="getAuthRecordFn"
              @keyup.enter="getAuthRecordFn"
              v-model="queryData.documentName"
              placeholder="请输入用户名称"
            />
            <el-input
              clearable
              style="margin-left: 15px; width: 150px"
              @clear="getAuthRecordFn"
              @keyup.enter="getAuthRecordFn"
              v-model="queryData.documentName"
              placeholder="请输入印章编号"
            />
            <el-button
              style="margin-left: 15px"
              type="primary"
              @click="serchFn"
            >
              <span class="iconfont icon-sousuo"></span>
              <span>搜索</span>
            </el-button>
          </div>
        </div>
        <el-table class="tableMain" :data="authRecord" stripe>
          <el-table-column
            prop="seal_id"
            width="200"
            show-overflow-tooltip
            label="印章ID"
          />
          <el-table-column width="130" show-overflow-tooltip label="印章名称">
            <template #default="{ row }">
              <span>{{ row.seal_name.split("-")[1] }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100" label="授权结果">
            <template #default="{ row }">
              <el-tag type="danger" v-if="row.authorization_status == 2"
                >授权失败</el-tag
              >
              <el-tag type="success" v-if="row.authorization_status == 1"
                >授权成功</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="user_name"
            show-overflow-tooltip
            label="用户名称"
          />

          <el-table-column
            prop="authorization_time"
            show-overflow-tooltip
            label="授权时间"
          />
        </el-table>
        <div class="pageCont">
          <el-pagination
            v-model:currentPage="queryData.page"
            v-model:page-size="queryData.per_page"
            background
            small
            layout="total, prev, pager, next, jumper"
            :total="total"
            @size-change="getAuthRecordFn"
            @current-change="getAuthRecordFn"
          />
        </div>
      </div>
    </div>
    <el-dialog
      v-model="editPassword"
      width="600"
      title="修改账号密码"
      :close-on-click-modal="false"
    >
      <div v-if="editPassword">
        <el-form ref="editPwdRef" :rules="rules" :model="queryParams">
          <el-form-item label-width="120" label="旧密码" prop="old_password">
            <el-input
              clearable
              v-model="queryParams.old_password"
              placeholder="请输入旧密码"
            />
          </el-form-item>
          <el-form-item label-width="120" label="新密码" prop="new_password">
            <el-input
              clearable
              type="password"
              v-model="queryParams.new_password"
              placeholder="请输入新密码"
            />
          </el-form-item>
          <el-form-item
            label-width="120"
            label="确认密码"
            prop="confirm_password"
          >
            <el-input
              clearable
              type="password"
              v-model="queryParams.confirm_password"
              placeholder="请输入确认密码"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editPassword = false">取消</el-button>
          <el-button type="primary" @click="sureEditFn"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="less">
.container {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to bottom right, #e2e4ff, #fff, #f0e5ff);
  .authCont {
    position: absolute;
    width: 100%;
    min-width: 1380px;
    top: 0;
    left: 0;
    // background-image: linear-gradient(to bottom, #fff, #c6caff);
    display: flex;
    align-items: center;
    padding: 20px 50px 20px 30px;
    box-sizing: border-box;
    justify-content: space-between;
    .logoImg {
      height: 60px;
      display: flex;
      align-items: center;
      // font-size: 20px;
      img {
        height: 100%;
      }
      .logo_text {
        margin-left: 10px;
        .logo_zh {
          font-size: 25px;
        }
        .logo_en {
          font-size: 12px;
        }
      }
    }
    .authIno {
      display: flex;
      align-items: center;
      .userName {
        color: #5967ff;
        display: flex;
        align-content: center;
        font-size: 12px;
        margin-left: 15px;
        cursor: pointer;
      }
      .userName_ {
        font-weight: bold;
      }
      .authTag {
        padding: 3px 10px;
        background-color: #5967ff;
        color: #fff;
        font-size: 12px;
        border-radius: 3px;
        margin-left: 5px;
        transform: scale(0.8);
        margin-right: 10px;
      }
      .xialaIcon {
        font-size: 20px;
        cursor: pointer;
        color: #666;
      }
    }
  }
  .stepCont {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .stepForm {
      width: 1200px;
      background-color: #fff;
      padding: 30px;
      box-sizing: border-box;
      border-radius: 15px;
      position: relative;
      margin: 0 auto;
      .maimHeadCont {
        .mainHead {
          font-size: 30px;
          font-weight: bold;
          text-align: center;
        }
      }
      .regFile {
        width: 100%;
        margin: 0 auto;
        margin-top: 30px;
        background-image: linear-gradient(to right, #587be4, #d0e4f6);
        padding: 30px 30px;
        box-sizing: border-box;
        border-radius: 10px;
        .fileCont {
          width: 100%;
          margin-top: 15px;
          margin-right: 15px;
          background-color: #fff;
          padding: 15px;
          box-sizing: border-box;
          height: 50px;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          input {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            color: #587be4;
            text-align: center;
          }
        }
        .disBtn {
          opacity: 0.5;
        }
        .fileCont:nth-child(1) {
          margin-top: 0;
        }
      }
      .recordTip {
        text-align: center;
        // margin-top: 15px;
        font-size: 12px;
        color: #333;
        span {
          color: #587be4;
          cursor: pointer;
        }
      }
      .conic {
        margin-top: 15px;
        width: 100%;
        text-align: center;
      }
    }
  }
  .maskCenterCont {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .closeMask {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .maskMain {
      width: 800px;
      border-radius: 15px;
      position: relative;
      padding: 30px;
      box-sizing: border-box;
      background-color: #fff;
      .resultTitle {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        position: relative;
        margin-bottom: 30px;
        img {
          width: 60%;
        }
        .resultText {
          position: absolute;
          width: 100%;
          height: 20px;
          left: 0;
          top: 0;
          text-align: center;
          line-height: 22px;
        }
      }
      .resultCont {
        border: 2px solid #587be4;
        padding: 15px;
        margin-top: 15px;
        padding-top: 20px;
        box-sizing: border-box;
        border-radius: 10px;
        background-color: #f0f4ff;
        position: relative;
        overflow: hidden;
        .resultTag {
          position: absolute;
          right: 0;
          top: 0;
          background-color: #cef3cc;
          color: #08b902;
          padding: 5px 15px;
          border-radius: 0 0 0 15px;
          font-size: 12px;
          display: flex;
          align-items: center;
          .iconfont {
            font-size: 14px;
            margin-right: 5px;
          }
        }
        .errTag {
          color: #ea2d10;
          background-color: #ffc2b8;
        }
        .waitSealList {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          justify-content: space-between;
          .waitSealItem {
            width: 49%;
            margin-top: 15px;
            background-color: #fff;
            padding: 15px;
            box-sizing: border-box;
            border-radius: 10px;
            text-align: center;
            display: flex;
            align-items: center;

            .waitSealInfo {
              flex: 1;
              width: 100%;
              // margin-left: 10px;
              position: relative;
              .checkBox {
                position: absolute;
                right: 0;
                top: 0;
                width: 18px;
                height: 18px;
                border: 1px solid #587be4;
                color: #fff;
                border-radius: 50%;
                text-align: center;
                font-size: 12px;
                line-height: 16px;
                // background-color: #587be4;
                cursor: pointer;
              }
              .checkBox_ {
                background-color: #587be4;
              }
              .resultCardDesItem {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                font-size: 12px;
                padding: 5px 0;
                .desItemName {
                  width: 60px;
                  text-align: right;
                }
                .desItemText {
                  text-align: left;
                  flex: 1;
                  margin-left: 10px;
                  display: flex;
                  align-items: center;
                }
                .boldText {
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
      .authBtn {
        background-color: #587be4;
        color: #fff;
        padding: 12px 0;
        text-align: center;
        border-radius: 5px;
        font-size: 12px;
        cursor: pointer;
        margin-top: 15px;
      }
    }
    .tableCont {
      width: 800px;
      max-height: 700px;
      background-color: #fff;
      padding: 30px;
      box-sizing: border-box;
      border-radius: 15px;
      position: relative;
      display: flex;
      flex-direction: column;
      .tableSerch {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .serchLeft {
          font-size: 15px;
          font-weight: bold;
        }
        .serchRight {
          display: flex;
          align-items: center;
          .iconfont {
            font-size: 16px;
          }
        }
      }
      .tableMain {
        flex: 1;
        height: 100px;
        margin-top: 20px;
        overflow: auto;
      }
      .pageCont {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
      }
    }
    .width_1050 {
      width: 1050px;
    }
  }
}
</style>
<style>
input::placeholder {
  color: #798bc9;
}
</style>
